import React, { Component } from 'react'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'
import request from './utils/request'

export default class App extends Component {
  state = {
    list: [],
  }
  render() {
    return (
      <section className='todoapp'>
        {/* TodoHeader */}
        <TodoHeader getDataAndRender={this.getDataAndRender} />
        {/* TodoMain */}
        {/* //!#2 */}
        <TodoMain list={this.state.list} />
        {/* TodoFooter */}
        <TodoFooter />
      </section>
    )
  }
  // !#1
  componentDidMount() {
    this.getDataAndRender()
  }
  // 注意这儿要是箭头函数，否则被子组件调用的时候，this 执行会出问题
  getDataAndRender = async () => {
    // 请求数据并存储到 list
    const { data: list } = await request.get('/')
    this.setState({ list })
  }
}
